<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">		 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scroll at Any Angle</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
@import "css/pan.css";
</style>
<script src="js/dw_scrollObj.js" type="text/javascript"></script>
<script src="js/dw_hoverscroll.js" type="text/javascript"></script>
<script type="text/javascript">
/*************************************************************************
  This code is from Dynamic Web Coding at www.dyn-web.com
  Copyright 2001-4 by Sharon Paine 
  See Terms of Use at www.dyn-web.com/bus/terms.html
  regarding conditions under which you may use this code.
  This notice must be retained in the code as is!
*************************************************************************/

function initScrollLayer() {
  // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll, 
  // if horizontal scrolling, id of element containing scrolling content (actually, the large image in this example)
  var wndo = new dw_scrollObj('wn', 'content', 'scrollImg');
  
  // jump to mountain
  wndo.shiftTo( document.getElementById(wndo.lyrId), -120, -40 );
}
</script>	
</head>
<body onload="initScrollLayer()">
<h1>Scroll at Any Angle</h1>

<p>The scrolling stops when an edge is reached on either axis.</p>

<div id="hold">
  <div id="wn">
    <div id="content"><img id="scrollImg" src="images/mtnlake.jpg" width="432" height="346" alt="" /></div>
  </div>

  <div id="lnks">
  <!-- dw_scrollObj.initScroll arguments: scroll area id (this is also first argument to constructor), 
       'up', 'down', 'left', 'right' or angle (0 to 360) -->
    <div id="lnk90"><a href="javascript:;" onmouseover="dw_scrollObj.initScroll('wn',90)" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')">90 &deg;</a></div>
    
    <div id="lnk45"><a href="javascript:;" onmouseover="dw_scrollObj.initScroll('wn',45)" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')">45 &deg;</a></div>
    
    <div id="lnk0"><a href="javascript:;" onmouseover="dw_scrollObj.initScroll('wn',0)" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')">0 &deg;</a></div>
    
    <div id="lnk315"><a href="javascript:;" onmouseover="dw_scrollObj.initScroll('wn',315)" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')">315 &deg;</a></div>
    
    <div id="lnk270"><a href="javascript:;" onmouseover="dw_scrollObj.initScroll('wn',270)" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')">270 &deg;</a></div>
    
    <div id="lnk225"><a href="javascript:;" onmouseover="dw_scrollObj.initScroll('wn',225)" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')">225 &deg;</a></div>
    
    <div id="lnk180"><a href="javascript:;" onmouseover="dw_scrollObj.initScroll('wn',180)" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')">180 &deg;</a></div>
    
    <div id="lnk135"><a href="javascript:;" onmouseover="dw_scrollObj.initScroll('wn',135)" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')">135 &deg;</a></div>
  </div>

</div>

<p><em>Note:</em> The image is not included in the download file.</p>

<p><a href="http://www.dyn-web.com">www.dyn-web.com</a></p>
</body>
</html>
